<template>
  <div>
    <div id="myDiv" ref="trajectory">
      <!-- Plotly chart will be drawn inside this DIV -->
    </div>
  </div>
</template>

<script>
import Plotly from 'plotly.js-dist'
import * as d3 from 'd3'
import APIHelper, {stuName, color} from '../util/APIHelper'

export default {
  name: "Line3D",
  data() {
    return {
      color: 'green',
      plotlyItem: Object,
      refWidth: 0,
      data: []
    }
  },
  computed: {
    onlyShowStandard() {
      return this.$store.state.onlyShowStandard
    },
    stuStartIdx() {
      return this.$store.state.stuStartIdx
    },
    allLineX() {
      return this.$store.state.allLineX
    },
    allLineY() {
      return this.$store.state.allLineY
    },
    allLineZ() {
      return this.$store.state.allLineZ
    },
    selectedList() {
      return this.$store.state.selectedList
    },
    opt() {
      return this.$store.state.opt
    },
    preOpt() {
      return this.$store.state.preOpt
    },
    trajectoryColor() {
      return this.$store.state.trajectoryColor
    },
    preColor() {
      return this.$store.state.preColor
    },
    trajectoryX() {
      return this.$store.state.trajectoryX
    },
    trajectoryY() {
      return this.$store.state.trajectoryY
    },
    trajectoryZ() {
      return this.$store.state.trajectoryZ
    },
    lineData() {
      const { allLineX, allLineY, allLineZ } = this
      return { allLineX, allLineY, allLineZ }
    }
  },
  mounted() {
    var that = this

    var a = '#ffff00';	//green
    var b = '#ff0000';	//red

    var compute = d3.interpolate(a,b);
    var linear = d3.scaleLinear()
        .domain([200,1600])
        .range([0,1]);

    that.refWidth= that.$refs.trajectory.offsetWidth;
    // console.log("refWidth", that.refWidth)

    let data = []

    // console.log('allX', that.allLineX)

    for(let key in that.allLineX){
      if(parseInt(key) == 0 || that.selectedList.hasOwnProperty(stuName[parseInt(key)])) {
        for (let i in that.allLineX[key]) {
          if (parseInt(key) == 0 || that.selectedList[stuName[parseInt(key)]].includes(parseInt(i) + 1)) {
            let tmp = {
              type: 'scatter3d',
              mode: 'lines',
              hovertemplate: '<b>x</b>:%{x:.1f} ' +
                  '<b>y</b>:%{y:.1f} ' +
                  '<b>z</b>:%{z:.1f}' +
                  '<extra> </extra>',
              opacity: 1,
              line: {
                width: key == 0 ? 7 : 4,
                color: key == 0 ? color[0] : color[that.stuStartIdx[stuName[parseInt(key)]] + parseInt(i)],
                reversescale: false
              }
            }
            tmp.x = that.allLineX[key][i]
            tmp.y = that.allLineY[key][i]
            tmp.z = that.allLineZ[key][i]

            data.push(tmp)
          }
        }
      }
    }


    Plotly.newPlot(myDiv, data, {
      showlegend: false,
      height: that.refWidth * 1.5 > 1000 ? 1000 : that.refWidth * 1.5,
      paper_bgcolor: "rgba(0,0,0,0)",
      scene: {
        annotations: [{
          x: that.allLineX[0][0][that.opt],
          y: that.allLineY[0][0][that.opt],
          z: that.allLineZ[0][0][that.opt],
          xref: 'x',
          yref: 'y',
          zref: 'z',
          text: '当前位置',
          showarrow: true,
          arrowhead: 3,
          ax: 20,
          ay: 20,
          az: 20
        }],
        camera:{
          eye:{x:1.7, y:1.2, z:0.7}
        },
      }
    })

    // const path = './standard_trajectory.csv'
    // Plotly.d3.csv(path, function(err, rows){
    //   function unpack(rows, key) {
    //     return rows.map(function(row)
    //     { return row[key]; }); }
    //
    //   var x = unpack(rows , 'x');
    //   var y = unpack(rows , 'y');
    //   var z = unpack(rows , 'z');
    //   // z = z.map(a=>-a)
    //   var r = unpack(rows , 'r');
    //   var c = r.map(d=>compute(linear(d)))
    //   that.$store.commit('setTrajectoryX', x)
    //   that.$store.commit('setTrajectoryY', y)
    //   that.$store.commit('setTrajectoryZ', z)
    //   that.$store.commit('setOpt', 0)
    //
    //   // var c = unpack(rows , 'color');
    //   Plotly.newPlot('myDiv', [{
    //     type: 'scatter3d',
    //     mode: 'lines',
    //     x: x,
    //     y: y,
    //     z: z,
    //     hovertemplate: '<b>x</b>:%{x:.1f} ' +
    //         '<b>y</b>:%{y:.1f} ' +
    //         '<b>z</b>:%{z:.1f}' +
    //         '<extra> </extra>',
    //     opacity: 1,
    //     line: {
    //       width: 6,
    //       color: c,
    //       reversescale: false
    //     }
    //   }], {
    //     height: 800,
    //     title:'Standard trajectory',
    //     scene: {
    //       annotations: [{
    //         x: that.trajectoryX[that.opt],
    //         y: that.trajectoryY[that.opt],
    //         z: that.trajectoryZ[that.opt],
    //         xref: 'x',
    //         yref: 'y',
    //         zref: 'z',
    //         text: 'Here',
    //         showarrow: true,
    //         arrowhead: 7,
    //         ax: 20,
    //         ay: 20,
    //         az: 20
    //       }],
    //       camera:{
    //         eye:{x:1.7, y:1.2, z:0.7}
    //       },
    //     }
    //
    //   })
    // })
  },
  methods: {
    updateLine(){
      let that = this
      let data = []

      if(that.onlyShowStandard){
        let tmp = {
          type: 'scatter3d',
          mode: 'lines',
          hovertemplate: '<b>x</b>:%{x:.1f} ' +
              '<b>y</b>:%{y:.1f} ' +
              '<b>z</b>:%{z:.1f}' +
              '<extra> </extra>',
          opacity: 1,
          line: {
            width: 7,
            color: color[0],
            reversescale: false
          }
        }
        tmp.x = that.allLineX[0][0]
        tmp.y = that.allLineY[0][0]
        tmp.z = that.allLineZ[0][0]

        data.push(tmp)
      }
      else {
        for (let key in that.allLineX) {
          if (parseInt(key) == 0 || that.selectedList.hasOwnProperty(stuName[parseInt(key)])) {
            for (let i in that.allLineX[key]) {
              if (parseInt(key) == 0 || that.selectedList[stuName[parseInt(key)]].includes(parseInt(i) + 1)) {
                let tmp = {
                  type: 'scatter3d',
                  mode: 'lines',
                  hovertemplate: '<b>x</b>:%{x:.1f} ' +
                      '<b>y</b>:%{y:.1f} ' +
                      '<b>z</b>:%{z:.1f}' +
                      '<extra> </extra>',
                  opacity: 1,
                  line: {
                    width: key == 0 ? 7 : 4,
                    color: parseInt(key) == 0 ? color[0] : color[that.stuStartIdx[stuName[parseInt(key)]] + parseInt(i)],
                    reversescale: false
                  }
                }
                tmp.x = that.allLineX[key][i]
                tmp.y = that.allLineY[key][i]
                tmp.z = that.allLineZ[key][i]

                data.push(tmp)
              }
            }
          }
        }
      }

      myDiv.data = data
      Plotly.redraw(myDiv);
    }
  }
}
</script>

<style scoped>

</style>